<template>
	<div>
		<head-page title="修改密码"></head-page>
		<!-- 登录 -->
		<!-- 登录页面 -->
		<div class="head">
			<img src="../../assets/logo.png" alt="" />
			<span>修改密码</span>
		</div>

		<!-- Form 表单 -->
		<van-form @submit="onSubmit">
			<van-field
				v-model="newPsW"
				:type="newIcon ? 'text' : 'password'"
				name="newPsW"
				label="新密码"
				placeholder="新密码"
				:right-icon="newIcon ? 'eye-o' : 'eye'"
				@click-right-icon="showNew"
				:rules="[{ required: true, message: '请填写新密码' }]"
			/>
			<van-field
				v-model="oldPsW"
				name="oldPsW"
				:type="oldIcon ? 'text' : 'password'"
				label="确认密码"
				placeholder="请确认密码"
				:right-icon="oldIcon ? 'eye-o' : 'eye'"
				@click-right-icon="showOld"
				:rules="[
					{ required: true, message: '确认密码' },
					{
						validator,
						message: '两次密码不一致，请重新输入',
					},
				]"
			/>
			<div style="margin: 16px">
				<van-button round block type="info" native-type="submit"
					>确定</van-button
				>
			</div>
		</van-form>
	</div>
</template>
  
  <script>
import { editUser } from "@/api/user"
export default {
	data() {
		return {
			oldPsW: '',
			oldIcon: false,
			newPsW: '',
			newIcon: false,
		}
	},
	methods: {
		// 重复密码验证
		validator(val) {
			if (this.newPsW != val) {
				return false
			}
		},
		// 旧密码图标点击
		showOld() {
			this.oldIcon = !this.oldIcon
		},
		// 新密码图标点击
		showNew() {
			this.newIcon = !this.newIcon
		},
		// 提交
		onSubmit(values) {
			editUser({
				userId: sessionStorage.getItem('userId'),
				userPass: values.newPsW
			}).then(res => {
				if (res.data.code == 200) {
					this.$toast.success('修改成功，请重新登录')
					sessionStorage.removeItem('userId')
					sessionStorage.removeItem('token')
					sessionStorage.removeItem('userTel')
					setTimeout(() => {
						this.$router.push('/login')
					}, 500)
				}
			})
		},
	}
}
  </script>
  
  
  <style scoped>
.head {
	width: 100%;
	font-size: 0.16rem;
	height: 1.5rem;
	color: black;
	position: relative;
}

.head span {
	font-size: 0.19rem;
	display: inline-block;
	position: absolute;
	top: 0.68rem;
}

.head img {
	width: 15%;
	margin: 0.5rem 0.1rem 1rem;
}
</style>